// 主题配置
export interface ThemeConfig {
  name: string;
  colors: {
    primary: string;
    primaryLight: string;
    primaryDark: string;
    secondary: string;
    success: string;
    warning: string;
    error: string;
    info: string;
    background: string;
    surface: string;
    text: {
      primary: string;
      secondary: string;
      disabled: string;
    };
    border: string;
    divider: string;
  };
  spacing: {
    xs: string;
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  borderRadius: {
    sm: string;
    md: string;
    lg: string;
    xl: string;
  };
  shadows: {
    sm: string;
    md: string;
    lg: string;
  };
}

// 浅色主题
export const lightTheme: ThemeConfig = {
  name: 'light',
  colors: {
    primary: '#007AFF',
    primaryLight: '#5AC8FA',
    primaryDark: '#0051D5',
    secondary: '#5856D6',
    success: '#34C759',
    warning: '#FF9500',
    error: '#FF3B30',
    info: '#5AC8FA',
    background: '#F2F2F7',
    surface: '#FFFFFF',
    text: {
      primary: '#000000',
      secondary: '#3C3C43',
      disabled: '#8E8E93',
    },
    border: '#C6C6C8',
    divider: '#E5E5EA',
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  borderRadius: {
    sm: '4px',
    md: '8px',
    lg: '12px',
    xl: '16px',
  },
  shadows: {
    sm: '0 1px 3px rgba(0, 0, 0, 0.1)',
    md: '0 4px 6px rgba(0, 0, 0, 0.1)',
    lg: '0 10px 15px rgba(0, 0, 0, 0.1)',
  },
};

// 深色主题
export const darkTheme: ThemeConfig = {
  name: 'dark',
  colors: {
    primary: '#0A84FF',
    primaryLight: '#64D2FF',
    primaryDark: '#0056CC',
    secondary: '#5E5CE6',
    success: '#30D158',
    warning: '#FF9F0A',
    error: '#FF453A',
    info: '#64D2FF',
    background: '#000000',
    surface: '#1C1C1E',
    text: {
      primary: '#FFFFFF',
      secondary: '#EBEBF5',
      disabled: '#8E8E93',
    },
    border: '#38383A',
    divider: '#2C2C2E',
  },
  spacing: {
    xs: '4px',
    sm: '8px',
    md: '16px',
    lg: '24px',
    xl: '32px',
  },
  borderRadius: {
    sm: '4px',
    md: '8px',
    lg: '12px',
    xl: '16px',
  },
  shadows: {
    sm: '0 1px 3px rgba(0, 0, 0, 0.3)',
    md: '0 4px 6px rgba(0, 0, 0, 0.3)',
    lg: '0 10px 15px rgba(0, 0, 0, 0.3)',
  },
};

// 主题管理器
export class ThemeManager {
  private currentTheme: ThemeConfig = lightTheme;
  private listeners: Array<(theme: ThemeConfig) => void> = [];

  constructor() {
    this.loadTheme();
  }

  // 获取当前主题
  getCurrentTheme(): ThemeConfig {
    return this.currentTheme;
  }

  // 设置主题
  setTheme(theme: ThemeConfig | 'light' | 'dark'): void {
    if (typeof theme === 'string') {
      this.currentTheme = theme === 'dark' ? darkTheme : lightTheme;
    } else {
      this.currentTheme = theme;
    }
    
    this.saveTheme();
    this.applyTheme();
    this.notifyListeners();
  }

  // 切换主题
  toggleTheme(): void {
    const newTheme = this.currentTheme.name === 'light' ? darkTheme : lightTheme;
    this.setTheme(newTheme);
  }

  // 监听主题变化
  onThemeChange(listener: (theme: ThemeConfig) => void): () => void {
    this.listeners.push(listener);
    return () => {
      const index = this.listeners.indexOf(listener);
      if (index > -1) {
        this.listeners.splice(index, 1);
      }
    };
  }

  // 应用主题到CSS变量
  private applyTheme(): void {
    const root = document.documentElement;
    const theme = this.currentTheme;

    // 设置CSS变量
    root.style.setProperty('--color-primary', theme.colors.primary);
    root.style.setProperty('--color-primary-light', theme.colors.primaryLight);
    root.style.setProperty('--color-primary-dark', theme.colors.primaryDark);
    root.style.setProperty('--color-secondary', theme.colors.secondary);
    root.style.setProperty('--color-success', theme.colors.success);
    root.style.setProperty('--color-warning', theme.colors.warning);
    root.style.setProperty('--color-error', theme.colors.error);
    root.style.setProperty('--color-info', theme.colors.info);
    root.style.setProperty('--color-background', theme.colors.background);
    root.style.setProperty('--color-surface', theme.colors.surface);
    root.style.setProperty('--color-text-primary', theme.colors.text.primary);
    root.style.setProperty('--color-text-secondary', theme.colors.text.secondary);
    root.style.setProperty('--color-text-disabled', theme.colors.text.disabled);
    root.style.setProperty('--color-border', theme.colors.border);
    root.style.setProperty('--color-divider', theme.colors.divider);

    // 设置间距变量
    root.style.setProperty('--spacing-xs', theme.spacing.xs);
    root.style.setProperty('--spacing-sm', theme.spacing.sm);
    root.style.setProperty('--spacing-md', theme.spacing.md);
    root.style.setProperty('--spacing-lg', theme.spacing.lg);
    root.style.setProperty('--spacing-xl', theme.spacing.xl);

    // 设置圆角变量
    root.style.setProperty('--border-radius-sm', theme.borderRadius.sm);
    root.style.setProperty('--border-radius-md', theme.borderRadius.md);
    root.style.setProperty('--border-radius-lg', theme.borderRadius.lg);
    root.style.setProperty('--border-radius-xl', theme.borderRadius.xl);

    // 设置阴影变量
    root.style.setProperty('--shadow-sm', theme.shadows.sm);
    root.style.setProperty('--shadow-md', theme.shadows.md);
    root.style.setProperty('--shadow-lg', theme.shadows.lg);
  }

  // 保存主题到本地存储
  private saveTheme(): void {
    try {
      uni.setStorageSync('theme', this.currentTheme.name);
    } catch (error) {
      console.warn('Failed to save theme:', error);
    }
  }

  // 从本地存储加载主题
  private loadTheme(): void {
    try {
      const savedTheme = uni.getStorageSync('theme');
      if (savedTheme) {
        this.setTheme(savedTheme);
      }
    } catch (error) {
      console.warn('Failed to load theme:', error);
    }
  }

  // 通知监听器
  private notifyListeners(): void {
    this.listeners.forEach(listener => {
      try {
        listener(this.currentTheme);
      } catch (error) {
        console.error('Theme listener error:', error);
      }
    });
  }
}

// 导出主题管理器实例
export const themeManager = new ThemeManager();

// 导出主题相关的工具函数
export const getThemeColor = (colorKey: string): string => {
  const theme = themeManager.getCurrentTheme();
  const keys = colorKey.split('.');
  let value: any = theme.colors;
  
  for (const key of keys) {
    value = value?.[key];
  }
  
  return value || '';
};

export const getThemeSpacing = (size: keyof ThemeConfig['spacing']): string => {
  return themeManager.getCurrentTheme().spacing[size];
};

export const getThemeBorderRadius = (size: keyof ThemeConfig['borderRadius']): string => {
  return themeManager.getCurrentTheme().borderRadius[size];
};

export const getThemeShadow = (size: keyof ThemeConfig['shadows']): string => {
  return themeManager.getCurrentTheme().shadows[size];
};